<template>
	<v-content ref="content" padding-bottom="100">
		<v-statusbar class="status-bar"></v-statusbar>
		<div class="header padding">
			<div class="title">学习</div>
			<div class="badge">提升</div>
			<!-- <image class="search" src="/static/image/icon-search.png"></image> -->
		</div>

		<div class="banner">
			<u-swiper
				:list="bannerList"
				previousMargin="47rpx"
				nextMargin="47rpx"
				circular
				radius="5"
				bgColor="#ffffff"
				interval="5000"
				@change="onSwiperChange"
			></u-swiper>
			<div class="dot">
				<div
					class="item"
					:class="[
						{
							active: index == bannerCurrent,
						},
					]"
					v-for="(_item, index) in bannerList"
					:key="index"
				></div>
			</div>
		</div>

		<div class="progress margin padding" v-for="item in progressList" :key="item.id">
			<div class="title" @click="toPage('/pages/learn/details?id=' + item.id)">{{ item.courseName }}</div>
			<div class="progress-line">
				<div class="progress-bar">
					<div
						class="progress-bar-inner"
						:style="[{ width: (item.finishCoursewares / item.totalCoursewares).toFixed(2) * 100 + '%' }]"
					></div>
				</div>
				<div class="icon" :class="{ success: item.finishCoursewares >= item.totalCoursewares }"></div>
			</div>
			<div class="message">
				学习进度 <span class="tip">{{ item.finishCoursewares }} / {{ item.totalCoursewares }}</span>
				<!-- <div class="date">截止2020-10-10</div> -->
			</div>
		</div>

		<div class="article-title padding">
			课程推荐
			<div class="more arrow-right" @click="toPage('/pages/learn/list')">查看更多</div>
		</div>

		<div class="article-list padding">
			<div
				class="item"
				v-for="(item, index) in article.list"
				:key="index"
				@click="toPage('/pages/learn/details?id=' + item.id)"
			>
				<div class="image-wrap">
					<image class="image" :src="item.coverImg" mode="aspectFill"></image>
					<!-- <div class="tip new">最新</div> -->
				</div>
				<div class="title">{{ item.courseName }}</div>
				<div class="message">{{ item.totalMembers || 0 }}人学过</div>
			</div>
			<div class="item"></div>
		</div>

		<v-tabbar current="1"></v-tabbar>
	</v-content>
</template>

<script>
import mixins from "@/mixins"

export default {
	name: "learn",
	mixins: [mixins],
	data() {
		return {
			bannerList: [],
			bannerCurrent: 0,

			article: {
				list: [],
				page: 1,
				total: 0,
			},
			progressList: [],
		}
	},
	computed: {},
	methods: {
		init() {
			this.getBanner()
			this.getArticle()
			this.getProgressList()
		},
		async getBanner() {
			const data = await this.$axios.get("/api/system/castleBanner/list")
			this.bannerList = data.map(item => item.bannerUrl)
		},
		async getArticle() {
			const { records, total } = await this.$axios.get("/api/study/course/studyCourse/page", {
				isRecommend: 1,
				currentPage: this.article.page,
				size: 4,
			})
			this.article.list = records
			this.article.total = total
		},
		async getProgressList() {
			const data = await this.$axios.get("/api/study/course/studyCourse/schedulelist")
			this.progressList = data
		},

		onSwiperChange({ current }) {
			this.bannerCurrent = current
		},
	},
}
</script>

<style lang="scss" scoped>
@import "../basis.scss";

.progress {
	border-bottom: 1px solid #f2f2f2;
	padding-top: 15rpx;
	padding-bottom: 10rpx;
	margin-bottom: 10rpx;
	.title {
		line-height: 95rpx;
		font-size: 34rpx;
		font-weight: 700;
	}
	.progress-line {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.progress-bar {
			flex: 1;
			background: #e4e4e4;
			border-radius: 20px;
			height: 16rpx;
			overflow: hidden;
			.progress-bar-inner {
				background: $primary;
				width: 0;
				height: 100%;
				transition: width 0.15s;
				border-radius: inherit;
			}
		}
		.icon {
			flex: none;
			width: 20rpx;
			height: 20rpx;
			margin-left: 15rpx;
			color: #e4e4e4;
			position: relative;
			border: 1px solid currentColor;
			border-radius: 50%;
			&::before {
				content: "";
				position: absolute;
				top: -3rpx;
				bottom: 0;
				right: 0;
				left: 0;
				margin: auto;
				width: 10rpx;
				height: 5rpx;
				transform: rotate(-45deg);
				border-bottom: 1px solid currentColor;
				border-left: 1px solid currentColor;
			}
			&.success {
				color: $uni-color-success;
			}
		}
	}
	.message {
		height: 74rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #808080;
		font-size: 24rpx;
		.tip {
			color: $primary;
			margin-left: 5rpx;
		}
		.date {
			margin-left: auto;
		}
	}
}
</style>
